<template>
  <Modal v-model="relFlag" :title="title" width="800px" :footer-hide="true">
    <div class="rel">
      <div class="relLeft">
        <dt-iframe v-if="relFlag" :url="iframeUrl"></dt-iframe>
      </div>
      <div class="relRight">
        <div class="prize_list">
          <div style="font-size: 16px; font-weight: 600">奖品预览</div>
          <div>综合中奖率：{{ acLotteryReq.synthesisWinningRate }}%</div>
          <div class="prize_item">
            <div v-for="(item, index) in acPrizeReqList" :key="index" class="item_class">
              <div>奖品{{ index + 1 }}</div>
              <div>{{ item.name }}</div>
              <div v-if="item.type == 1">实物</div>
              <div v-if="item.type == 2">现金</div>
              <div v-if="item.type == 2">{{ item.unitPrice }}元</div>
              <div>数量：{{ item.count }}</div>
            </div>
          </div>
          <div>总金额：{{ totalMoney }}元</div>
        </div>
        <div class="er">
          <div id="qrcode" class="qrcode" ref="qrcode"></div>
          <p>微信扫一扫预览效果</p>
        </div>
      </div>
    </div>
    <div class="footerRelBtn0" v-if="btnFlag != 'flag'">
      <Button @click="hide">关闭</Button>
      <Button type="info" @click="onOk" v-if="statusVal != 'PUBLISHED'">发布</Button>
    </div>
  </Modal>
</template>

<script>
  import QRCode from 'qrcodejs2-fix'
  import activityMgr from '@/biz/activity/activity'
  export default {
    data() {
      return {
        title: '预览/发布',
        relFlag: false,
        btnFlag: '',
        statusVal: '',
        iframeUrl: '',
        acId: '',
        erImgUrl: '',
        totalMoney: '', // 总金额
        acPrizeReqList: [],
        acLotteryReq: {}
      }
    },
    mounted() {},
    methods: {
      show(val) {
        this.relFlag = true
        this.btnFlag = val.btnFlag
        this.acId = val.acId
        this.statusVal = val.status
        this.getDetail()
      },
      hide() {
        this.relFlag = false
      },
      getDetail() {
        activityMgr.selectBasics({ acId: this.acId }).then((res) => {
          if (res) {
            this.acPrizeReqList = res.acPrizeRespList
            this.acLotteryReq = res.acLotteryResp
            this.totalMoney = this.getTotal()
            this.iframeUrl = `${this.$dt.env.h5Url}/#/pages/activity/detail?acId=${this.acId}&from=3&times=${this.acLotteryReq.initialLotteryCount}`
            this.$nextTick(() => {
              document.getElementById('qrcode').innerHTML = ''
              new QRCode('qrcode', {
                width: 250, // 设置宽度，单位像素
                height: 250, // 设置高度，单位像素
                text: this.iframeUrl // 设置二维码内容或跳转地址
              })
            })
          }
        })
      },
      getTotal() {
        let total = 0
        this.acPrizeReqList.forEach((item) => {
          if (item.type == 2) {
            total = total + item.count * item.unitPrice
          }
        })
        return total.toFixed(2)
      },

      onOk() {
        let _this = this
        this.$Modal.confirm({
          title: '发布',
          content: '确认发布该活动？',
          closable: true,
          onOk: () => {
            _this.$parent.imgFlag = false
            let params = {
              acId: this.acId
            }
            activityMgr.publishBasics(params).then((res) => {
              this.$Message.success('发布成功')
              this.$emit('publishUpdata')
              this.relFlag = false
            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .rel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .relLeft {
      width: 375px;
      height: 660px;
    }
    .relRight {
      flex: 1;
      .er {
        display: flex;
        align-items: center;
        flex-direction: column;
        div {
          width: 250px;
          height: 250px;
          margin: 40px auto;
        }
      }
      .prize_list {
        padding-left: 24px;
      }
    }
  }
  .footerRelBtn0 {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;
    button {
      width: 80px;
      margin: 0 10px;
    }
  }
  .item_class {
    display: flex;
    div {
      margin-right: 12px;
    }
  }
</style>
